<!DOCTYPE html>
<html lang="en-gb" dir="ltr">

    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Visibility - UIkit tests</title>
        <script src="js/test.js"></script>
    </head>

    <body>

        <div class="uk-container">

            <h1>Visibility</h1>

            <h2>Hidden</h2>

            <div class="uk-child-width-1-2@s uk-child-width-1-4@m uk-text-center" uk-grid>
                <div>
                    <div class="uk-panel">
                        <div class="uk-alert uk-margin-remove uk-alert-success">✔ Small<br>(Phone Landscape)</div>
                        <div class="uk-alert uk-position-cover uk-margin-remove uk-hidden@s">Small<br>(Phone Landscape)</div>
                    </div>
                </div>
                <div>
                    <div class="uk-panel">
                        <div class="uk-alert uk-margin-remove uk-alert-success">✔ Medium<br>(Tablet Landscape)</div>
                        <div class="uk-alert uk-position-cover uk-margin-remove uk-hidden@m">Medium<br>(Tablet Landscape)</div>
                    </div>
                </div>
                <div>
                    <div class="uk-panel">
                        <div class="uk-alert uk-margin-remove uk-alert-success">✔ Large<br>(Desktop)</div>
                        <div class="uk-alert uk-position-cover uk-margin-remove uk-hidden@l">Large<br>(Desktop)</div>
                    </div>
                </div>
                <div>
                    <div class="uk-panel">
                        <div class="uk-alert uk-margin-remove uk-alert-success">✔ X-Large<br>(Large Screens)</div>
                        <div class="uk-alert uk-position-cover uk-margin-remove uk-hidden@xl">X-Large<br>(Large Screens)</div>
                    </div>
                </div>
            </div>

            <h2>Visible</h2>

            <div class="uk-child-width-1-2@s uk-child-width-1-4@m uk-text-center" uk-grid>
                <div>
                    <div class="uk-panel">
                        <div class="uk-alert uk-margin-remove">Small<br>(Phone Landscape)</div>
                        <div class="uk-alert uk-alert-success uk-position-cover uk-margin-remove uk-visible@s">✔ Small<br>(Phone Landscape)</div>
                    </div>
                </div>
                <div>
                    <div class="uk-panel">
                        <div class="uk-alert uk-margin-remove">Medium<br>(Tablet Landscape)</div>
                        <div class="uk-alert uk-alert-success uk-position-cover uk-margin-remove uk-visible@m">✔ Medium<br>(Tablet Landscape)</div>
                    </div>
                </div>
                <div>
                    <div class="uk-panel">
                        <div class="uk-alert uk-margin-remove">Large<br>(Desktop)</div>
                        <div class="uk-alert uk-alert-success uk-position-cover uk-margin-remove uk-visible@l">✔ Large<br>(Desktop)</div>
                    </div>
                </div>
                <div>
                    <div class="uk-panel">
                        <div class="uk-alert uk-margin-remove">X-Large<br>(Large Screens)</div>
                        <div class="uk-alert uk-alert-success uk-position-cover uk-margin-remove uk-visible@xl">✔ X-Large<br>(Large Screens)</div>
                    </div>
                </div>
            </div>

            <h2>Toggle (Hover + Focus)</h2>

            <div class="uk-child-width-1-2@s uk-child-width-1-4@m uk-text-center" uk-grid>
                <div>
                    <div class="uk-panel uk-visible-toggle" tabindex="0">
                        <div class="uk-alert uk-margin-remove">Hidden Hover<br><br></div>
                        <div class="uk-alert uk-alert-success uk-position-cover uk-margin-remove uk-hidden-hover">✔ Hidden Hover<br><a href>Focus Test</a></div>
                    </div>
                </div>
                <div>
                    <div class="uk-panel uk-visible-toggle" tabindex="0">
                        <div class="uk-alert uk-margin-remove">Invisible Hover<br><br></div>
                        <div class="uk-alert uk-alert-success uk-position-cover uk-margin-remove uk-invisible-hover">✔ Invisible Hover<br><a href>Focus Test</a></div>
                    </div>
                </div>
            </div>

            <h2>Touch</h2>

            <div class="uk-child-width-1-2@s uk-child-width-1-4@m uk-text-center" uk-grid>
                <div>
                    <div class="uk-panel">
                        <div class="uk-alert uk-margin-remove uk-alert-success">✔ Hidden Touch</div>
                        <div class="uk-alert uk-position-cover uk-margin-remove uk-hidden-touch">Hidden Touch</div>
                    </div>
                </div>
                <div>
                    <div class="uk-panel">
                        <div class="uk-alert uk-margin-remove uk-alert-success">✔ Hidden No-Touch</div>
                        <div class="uk-alert uk-position-cover uk-margin-remove uk-hidden-notouch">Hidden No-Touch</div>
                    </div>
                </div>
            </div>

        </div>

    </body>
</html>
